#@layout()
#define script()
<script src="#(CPATH)/static/components/editable/js/bootstrap-editable.min.js"></script>
<script src="#(CPATH)/static/components/selectize/selectize.min.js"></script>
<script src="#(CPATH)/static/components/highlight/highlight.pack.js"></script>

<script src="#(CPATH)/static/components/vditor/dist/index.min.js"></script>
<script src="#(CPATH)/static/components/ckeditor5/ckeditor.js"></script>
<script src="#(CPATH)/static/components/sortable/sortable.min.js"></script>

#render(editor.js ??)

<script>

    var $select = $('.product-tags').selectize({
        plugins: ['remove_button'],
        delimiter: ',',
        persist: false,
        addPrecedence: true,
        create: true,
        render: {
            option_create: function (data, escape) {
                return '<div class="create" style="padding-left: 5px"> 添加标签：<strong style="color: #DD1144">' + escape(data.input) + '</strong></div>';
            }
        }
    });


    $(".newTag").each(function () {
        $(this).on('click', function () {
            $select[0].selectize.createItem($(this).text());
        })
    });


    $(".tflag").each(function () {
        $(this).on('click', function () {
            $("#flag").val($(this).text());
        })
    });


    $(".submitBtn").on("click", function () {
        $("#productStatus").val($(this).attr("data-status"));
        doSubmit();
    });

    // 全局函数,在CKEditor ctrl + s 快捷键处用到,保留product的status
    window.doSubmit = function (openPreview) {

        if (window.onEditorSubmitBefore) {
            onEditorSubmitBefore()
        }

        ajaxSubmit("#form", function (data) {
            $("#productId").attr("value", data.id);
            toastr.success('产品信息保存成功。');

            //设置预览路劲
            $("#preview").attr("href","#(CPATH)/admin/preview?url=#(CPATH)/admin/product/preview/"+data.id);

            //如果是通过预览按钮 来保存 那么打开预览窗口
            if(openPreview === true){
                window.open("#(CPATH)/admin/preview?url=#(CPATH)/admin/product/preview/"+data.id);
            }


        });
    };


    $("#removeThumbnail").on("click", function () {
        $("#thumbnail").attr("src", "#(CPATH)/static/commons/img/nothumbnail.jpg");
        $("#productThumbnail").val("");
    })

    //预览点击事件
    function previewProduce($this){

        if(!$this.href){
            doSubmit(true)
        }

    }


    setSaveHotKeyFunction(doSubmit);


    /**
     * 切换编辑器的按钮功能
     * @param id
     */
    function doChangeEditor(btn, id) {
        if (confirm('确定要切换编辑器吗？切换可能出现前台渲染内容缺失的问题，且只对未上架商品有效')) {
            var changeMode = $(btn).attr('data-edit-mode') == "html" ? "markdown" : "html";
            if (id && id !== '0') {
                ajaxGet('#(CPATH)/admin/product/doChangeEditMode?id=' + id + "&mode=" + changeMode);
            } else {
                ajaxGet('#(CPATH)/commons/changeEditor/' + changeMode);
            }
        }
    }


    $(function () {
        // 设置按钮
        $("#rightSwitch").click(function () {
            $(this).toggleClass('switch-btn');
            $(".rightPanel").toggle();
            $(".leftPanel").toggleClass("col-lg-12", "col-lg-3");
        });
        // 设置编辑器的高度
        var headerHeight = $(".article-header ").innerHeight();
        var mainHeight = $(".main-header").innerHeight();
        var editorHeight = $(window).height() - parseFloat(headerHeight) - parseFloat(mainHeight);
        $('#editor').css({
            "min-height": editorHeight
        })
    })


    $(".chooseAttachment").on("click", function () {
        var $this = $(this);
        layer.open({
            type: 2,
            title: '选择附件',
            anim: 2,
            shadeClose: true,
            shade: 0.3,
            area: ['90%', '90%'],
            content: jpress.cpath + '/admin/attachment/browse?uititle=附件',
            end: function () {
                if (layer.data.src != null) {
                    var src = layer.data.src;
                    var title = layer.data.title;
                    //video ".mp4", ".avi", ".wmv", ".mpeg", ".mov", ".mkv", ".flv", ".rmvb", ".rm", ".3gp", ".ts", ".vob", ".m3u8"
                    if (src.endsWith(".mp4") || src.endsWith(".avi") || src.endsWith(".wmv") || src.endsWith(".mpeg") || src.endsWith(".mov")
                        || src.endsWith(".mkv") || src.endsWith(".flv") || src.endsWith(".rmvb") || src.endsWith(".rm") || src.endsWith(".3gp") ||
                        src.endsWith(".ts") || src.endsWith(".vob") || src.endsWith(".m3u8")) {
                        insertVideoToEditor && insertVideoToEditor(src, title)
                    }

                    //image ".jpg", ".jpeg", ".png", ".bmp", ".gif", ".webp"
                    else if (src.endsWith(".jpg") || src.endsWith(".jpeg") || src.endsWith(".png")
                        || src.endsWith(".bmp") || src.endsWith(".gif") || src.endsWith(".webp")) {
                        insertImageToEditor && insertImageToEditor(src, title)
                    }
                    // other file
                    else {
                        insertAttachementToEditor && insertAttachementToEditor(src, title)
                    }
                }
            }
        });
    })

    //创建播放器 容器
    function createdVideoContainer(uid, cover) {

        var videoContainer = document.createElement('video');
        videoContainer.setAttribute("data-vid", uid);
        videoContainer.setAttribute("poster", cover);
        videoContainer.setAttribute("style", "height:240px;width:100%;object-fit:fill;");
        videoContainer.setAttribute("class", "jpress-video");
        videoContainer.setAttribute('id', "video_player" + (Math.random()).toString().slice(5, 10));

        return videoContainer

    }

    //选择视频
    function chooseVideo() {
        layer.open({
            type: 2,
            title: '选择视频',
            anim: 2,
            shadeClose: true,
            shade: 0.3,
            area: ['90%', '90%'],
            content: jpress.cpath + '/admin/attachment/video/browse?uititle=视频',
            end: function () {
                if (layer.data.uid != null) {

                    var uid = layer.data.uid;
                    var cloudType = layer.data.type;
                    var cover = layer.data.cover;

                    if (cloudType != null) {//阿里云

                        //创建容器
                        let videoContainer = createdVideoContainer(uid, cover);

                        $(".video").html(videoContainer.outerHTML)

                        initJPressVideo();

                        $("#videoId").val(uid)

                    }

                }
            }
        });
    }

    //移除视频
    $("#removeVideo").on('click', function (event) {
        $("#changeVideo").empty();
        $("#changeVideo").html($("#videoTemplate").html())
        $("#videoId").val("");
    })

    $(function () {
        if ('#(product.video_id ??)' != null && '#(product.video_id ??)' != '' && '#(product.video_id ??)' != undefined) {

            //创建容器
            let videoElement = createdVideoContainer('#(product.video_id ??)', '#(attachmentVideo.cover ??)');
            //容器放到页面
            $(".video").html(videoElement.outerHTML)

            initJPressVideo();

        }

    })

    $(".chooseImage").on("click", function () {
        var html = $("#imageItem").html();
        layer.data.src = null;
        layer.open({
            type: 2,
            title: '选择图片',
            anim: 2,
            shadeClose: true,
            shade: 0.3,
            area: ['90%', '90%'],
            content: jpress.cpath + '/admin/attachment/browse',
            end: function () {
                if (layer.data.src != null) {
                    var src = layer.data.src;
                    html = html.replace(/{{src}}/g, src);
                    $(".chooseImage").parent().before(html);
                }
            }
        });
    });

    $('body').on('click', '.image-reset', function (event) {
        event.currentTarget.parentElement.remove();
    });

    function allowDrop(e) {
        e.preventDefault();
    }

    var dragdiv = null;

    function drag(e, dom) {
        dragdiv = dom;
    }

    function drop(e, dom) {
        $(dom).before($(dragdiv).prop("outerHTML"));
        $(dragdiv).remove();
    }

    //插入视频
    $(".chooseVideo").on("click", function () {
        var $this = $(this);
        layer.open({
            type: 2,
            title: '选择视频',
            anim: 2,
            shadeClose: true,
            shade: 0.3,
            area: ['90%', '90%'],
            content: jpress.cpath + '/admin/attachment/video/browse?uititle=视频',
            end: function () {

                if (layer.data.uid != null) {

                    var uid = layer.data.uid;
                    var cover = jpress.cpath + layer.data.cover;

                    var video = document.createElement('video');
                    video.setAttribute("data-vid", uid);
                    video.setAttribute("poster", cover);
                    video.setAttribute('style', "height:240px;width:425px;")
                    video.setAttribute("class", "jpress-video");

                    //视频播放容器的id
                    var idStr = "video_player_container"+(Math.random()).toString().slice(5,10)
                    video.setAttribute('id', idStr);

                    insertHtmlToEditor(video.outerHTML);

                }
            }
        });

    })

    //选择表单
    $(".chooseForm").on("click", function () {
        var $this = $(this);

        layer.open({
            type: 2,
            title: '选择表单',
            anim: 2,
            shadeClose: true,
            shade: 0.3,
            area: ['90%', '90%'],
            content: jpress.cpath + '/admin/form/browse',
            end: function () {

                if (layer.data.uid) {

                    var formUUID = layer.data.uid;

                    var formName = layer.data.name;

                    let html = '<div><div class="jpress-form-card" contenteditable="false" data-form-id=' + formUUID + '>' + formName + '（表单）</div></div><br />'

                    insertHtmlToEditor(html);

                }

            }
        })

    })


    $("#product-title").each(function () {
        this.setAttribute("style", "height:" + (this.scrollHeight) + "px;overflow-y:hidden;");
    }).on("input", function () {
        this.style.height = 0;
        this.style.height = (this.scrollHeight) + "px";
    });


</script>

<template id="videoTemplate">
    <div class="card-body p-0 video">
        <img src="#(CPATH)/static/commons/img/nothumbnail.jpg" style="width: 100%;max-height: 500px">
    </div>
</template>

<script id="imageItem" type="text/tmpl">
    <div class="product-thumbnail-item" draggable="true" ondrop="drop(event,this)" ondragover="allowDrop(event)"  ondragstart="drag(event, this)">
        <img src="{{src}}">
        <input type="hidden" name="imageSrcs" value="{{src}}" />
        <input type="hidden" name="imageIds" value="0" />
        <i class="fas fa-trash-alt image-reset" ></i>
    </div>
</script>
#end
#define css()
<link rel="stylesheet" href="#(CPATH)/static/components/bootstrap-icons/bootstrap-icons.css">
<link href="#(CPATH)/static/components/editable/css/bootstrap-editable.css" rel="stylesheet">
<link href="#(CPATH)/static/components/selectize/css/selectize.css" rel="stylesheet">
<link href="#(CPATH)/static/components/selectize/css/selectize.bootstrap4.css" rel="stylesheet">
<link href="#(CPATH)/static/components/highlight/styles/github.css" rel="stylesheet">
<link href="#(CPATH)/static/components/vditor/dist/index.css" rel="stylesheet">
<style>
    .main-footer.text-sm, .main-footer {
        display: none !important;
    }

    .content-wrapper {
        position: relative;
        min-height: calc(100vh - calc(3.5rem + 1px));
        overflow: hidden;
    }

    .panelContainer {
        position: relative;
        height: calc(100% - 71px);
    }

    .popover-content {
        padding: 9px 14px;
        margin: 0 10px;
    }

    #slug {
        cursor: pointer;
    }

    .vditor-wysiwyg pre.vditor-reset:focus {
        outline: none;
        background-color: #fff;
    }


    .article-header i {
        font-size: 22px;
        cursor: pointer;
    }

    .boder-bottom {
        border-bottom: 1px solid #d9d9d9;
    }

    .setting-dropmenu {
        width: 300px;
        top: 100%;
        left: initial !important;
        right: 0;
    }

    .tab-content {
        height: 100%;
    }

    .leftPanel {
        width: 100%;
        height: 100%;
        overflow-y: scroll;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .leftPanel::-webkit-scrollbar {
        width: 0;
    }

    .rightPanel {
        position: sticky;
        height: 100%;
        overflow-y: scroll;
        border-left: #efefef solid 1px;
    }

    .pannel-inner {
        width: 100%;
        height: auto;
        padding-left: 0 !important;
        overflow-x: hidden;
    }

    #formAttrTab .nav-link {
        padding-left: 1rem;
        padding-right: 1rem;
        border: none;
        border-bottom: 4px solid #fff;
        position: relative;
        top: -1px;
        color: #333;
        font-size: 15px;
    }

    #formAttrTab .nav-link.active {
        border: none;
        border-bottom: 4px solid #0056b3;
        color: #0056b3;
        font-size: 15px;
    }

    .dropdown-item {
        padding: .75rem 1rem;
    }

    .card {
        margin-bottom: 0rem;
        border-radius: 0;
    }

    .ck-editor__editable_inline{
        height: calc(100vh - 158px);
    }

    #rightSwitch {
        display: inline-block;
        padding: 3px 6px 2px;
        border-radius: 4px;
        cursor: pointer;
        border: 1px solid #fff;
    }

    .switch-btn {
        display: inline-block;
        padding: 3px 6px 2px;
        border-radius: 4px;
        cursor: pointer;
        background-color: #000;
        border: 1px solid #000;
    }

    .switch-btn i, .switch-btn-active i {
        color: #fff;
        font-size: 18px !important;
        vertical-align: middle;
    }

    .switch-btn-active {
        border: 1px solid #fff;
        background-color: #fff;
    }

    .switch-btn-active i {
        font-size: 18px !important;
        color: #0069d9;
    }

    .ck-editor .ck-sticky-panel .ck-sticky-panel__content .ck-toolbar_grouping {
        background: #fff;
        height: 45px;
        border-top: none;
    }

    .vditor {
        border-top: none;
    }

    .vditor-toolbar {
        padding-left: 64px;
        height: 45px;
        background: #fff;
        display: flex;
        align-items: center;
    }

    .vditor-hint {
        background: #f6f6f6;
    }

    .vditor-hint:before {
        border-bottom-color: #f6f6f6;
    }
    .ck-source-editing-area{
        min-height:100vh;
        height:auto;
    }
</style>
#end

#define content()
<section class="content" style="position: absolute;height:100%;width:100%;padding: 0">

    <form action="#(CPATH)/admin/product/doSave" method="post" id="form" class="h-100 bg-white">

        <section class="article-header d-flex justify-content-between align-items-center p-3 boder-bottom bg-white">
            <div class="d-flex align-items-center justify-content-between" style="width: 40%">
                <div class="input-group mr-2">
                    <div class="input-group-prepend">
                        <span class="input-group-text">标题</span>
                    </div>
                    <textarea rows="1" type="text" class="form-control" placeholder="请输入商品标题..." name="product.title"
                              autocomplete="off"
                              id="product-title">#(product.title ??)</textarea>
                </div>

                <div class="dropdown">
                    <button class="btn btn-primary dropdown-toggle" type="button" id="insertFile" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                        插入...
                    </button>
                    <div class="dropdown-menu" aria-labelledby="insertFile">
                        <a class="dropdown-item chooseAttachment" href="#">插入附件</a>
                        <a class="dropdown-item chooseVideo" href="#">插入视频</a>
                        <a class="dropdown-item chooseForm" href="#">插入表单</a>
                    </div>
                </div>
            </div>

            <div class="d-flex align-items-center justify-content-between">
                <button type="button" data-status="2" class="btn btn-secondary mr-2 submitBtn">保存草稿</button>
                <a target="_blank" #if(product.id ??) href="#(CPATH)/admin/preview?url=#(CPATH)/admin/product/preview/#(product.id ??)" #else onclick="previewProduce(this)" #end
                   id="preview" class="btn btn-secondary mr-2"><span>预览</span></a>
                <button type="button" data-status="1" class="btn btn-primary mr-2 submitBtn">上架</button>

                <span class="switch-btn" id="rightSwitch"><i class="bi bi-gear" style="font-size:18px"></i></span>
                <span data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="pl-2"><i class="bi bi-three-dots-vertical"></i></span>

                <div class="dropdown-menu mr-2">
                    <a class="dropdown-item submitBtn" data-status="3" href="javascript:;">移至垃圾箱</a>
                    <a class="dropdown-item" href="javascript:;" data-edit-mode="#(editor.editMode ?? 'html')" onclick="doChangeEditor(this,'#(product.id ?? 0)')">切换编辑器</a>
                </div>

            </div>

        </section>

        <input type="hidden" id="productStatus" name="product.status" value='#(product.status ?? "1")'>
        <input type="hidden" id="productId" name="product.id" value="#(product.id ??)">
        <input type="hidden" id="videoId" name="product.video_id" value="#(product.video_id ??)">

        <div class="row panelContainer">
            <div class="col-lg-9  leftPanel pr-0">
                <div class="pannel-inner">
                    <div class="form-group mb-0">
                        <div class="">

                            #render(editor.html, name="product.content", content=product.content ??)

                        </div>
                    </div>
                </div>

            </div>
            <div class="col-lg-3 pl-0 pr-0 rightPanel">
                <div class="pannel-inner">
                    <ul class="nav nav-tabs" id="formAttrTab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab"
                               href="#main-tab" role="tab" aria-controls="component" aria-selected="true">商品</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#template-tab" role="tab"
                               aria-controls="module" aria-selected="false">模板</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#extend-tab" role="tab"
                               aria-controls="module" aria-selected="false">扩展</a>
                        </li>
                    </ul>
                    <div class="tab-content">

                        <div class="tab-pane fade show active" id="main-tab" role="tabpanel">
                            <div class="accordion">

                                <!--基础-->
                                <div class="card">
                                    <div class="card-header">
                                        <h2 class="mb-0">
                                            <button class="btn btn-link btn-block text-left text-dark" type="button"
                                                    data-toggle="collapse" data-target="#fields-cards">
                                                基础
                                                <span class="float-right"><i class="bi bi-chevron-down"></i></span>
                                            </button>
                                        </h2>
                                    </div>
                                    <div id="fields-cards" class="collapse">
                                        <div class="card-body">

                                            <div class="form-group row">
                                                <label class="col-sm-12">购买链接</label>

                                                <div class="col-sm-12">
                                                    <input type="text" class="form-control" placeholder="请输入购买链接"
                                                           name="product.buy_link"
                                                           value="#(product.buy_link ??)">
                                                </div>

                                            </div>

                                            <div class="form-group">
                                                <label class="col-sm-12">产品卖点</label>
                                                <div class="col-sm-12">
                                                    <textarea class="form-control" id="usp"
                                                              name="product.usp" placeholder="请输入产品卖点"
                                                              rows="5">#(product.usp ??)</textarea>
                                                    <p class="text-muted"></p>
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label class="col-sm-12">摘要</label>
                                                <div class="col-sm-12">
                                                    <textarea class="form-control" id="summary"
                                                              name="product.summary" placeholder="请输入摘要"
                                                              rows="5">#(product.summary ??)</textarea>
                                                    <p class="text-muted"></p>
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label class="col-sm-12">访问量</label>
                                                <div class="col-sm-12">
                                                    <input class="form-control" id="view_count" name="product.view_count" value="#(product.view_count ??)" placeholder="请输入访问量">
                                                    <p class="text-muted"></p>
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label class="col-sm-12">销量</label>
                                                <div class="col-sm-12">
                                                    <input class="form-control" id="sales_count" name="product.sales_count" value="#(product.sales_count ??)" placeholder="请输入销量">
                                                    <p class="text-muted"></p>
                                                </div>
                                            </div>

                                            <!--                                            <div class="form-group row">-->
                                            <!--                                            <div class="custom-control custom-switch">-->
                                            <!--                                                <label class="col-sm-9" style="padding-top:7.5px;padding-left:15px">是否允许评论</label>-->

                                            <!--                                                <div class="col-sm-3">-->
                                            <!--                                                <input type="checkbox" class="custom-control-input" id="customSwitch1">-->
                                            <!--                                                <label class="custom-control-label" for="customSwitch1"></label>-->
                                            <!--                                                </div>-->
                                            <!--                                            </div>-->
                                            <!--                                            </div>-->



                                            <div class="form-group row">
                                                <label class="col-sm-9" style="padding-top:7.5px;padding-left:15px">是否允许评论</label>
                                                <div class="col-sm-3">

                                                    <input type="checkbox" class="switchery" data-for="comment_status" #checkedIf(product.comment_status ??)>
                                                    <input type="hidden" id="comment_status" name="product.comment_status">
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>

                                <!--SEO-->
                                <div class="card">
                                    <div class="card-header">
                                        <h2 class="mb-0">
                                            <button class="btn btn-link btn-block text-left text-dark" type="button"
                                                    data-toggle="collapse" data-target="#seo-card">
                                                SEO
                                                <span class="float-right"><i class="bi bi-chevron-down"></i></span>
                                            </button>
                                        </h2>
                                    </div>
                                    <div id="seo-card" class="collapse">
                                        <div class="card-body">

                                            <div class="form-group">
                                                <label class="col-sm-12">SEO关键字</label>
                                                <div class="col-sm-12">
                                                    <textarea class="form-control" id="meta_keywords"
                                                              name="product.meta_keywords" placeholder="请输入"
                                                              rows="2">#(product.meta_keywords ??)</textarea>
                                                    <p class="text-muted"></p>
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label class="col-sm-12">SEO描述</label>
                                                <div class="col-sm-12">
                                                    <textarea class="form-control" id="meta_description"
                                                              name="product.meta_description" placeholder="请输入"
                                                              rows="2">#(product.meta_description ??)</textarea>
                                                    <p class="text-muted"></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!--价格-->
                                <div class="card">
                                    <div class="card-header">
                                        <h2 class="mb-0">
                                            <button class="btn btn-link btn-block text-left text-dark" type="button"
                                                    data-toggle="collapse" data-target="#price-card">
                                                价格
                                                <span class="float-right"><i class="bi bi-chevron-down"></i></span>
                                            </button>
                                        </h2>
                                    </div>
                                    <div id="price-card" class="collapse">
                                        <div class="card-body">

                                            <div class="form-group row">
                                                <label class="col-sm-12">销售价格</label>
                                                <div class="col-sm-12">
                                                    <input type="text" class="form-control" id="price"
                                                           name="product.price" placeholder=""
                                                           value="#(product.price ??)">
                                                    <p class="text-muted">产品的实际销售价格。</p>
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <label class="col-sm-12">原价</label>
                                                <div class="col-sm-12">
                                                    <input type="text" class="form-control" id="origin_price"
                                                           name="product.origin_price" placeholder=""
                                                           value="#(product.origin_price ??)">
                                                    <p class="text-muted">产品的原始价格，页面会使用删除线进行显示。</p>
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <label class="col-sm-12">限时价格</label>
                                                <div class="col-sm-12">
                                                    <input type="text" class="form-control" id="limited_price"
                                                           name="product.limited_price" placeholder=""
                                                           value="#(product.limited_price ??)">
                                                    <p class="text-muted">限时价格（早鸟价）。</p>
                                                </div>
                                            </div>


                                        </div>
                                    </div>
                                </div>

                                <!--标签-->
                                <div class="card">
                                    <div class="card-header" id="heading2">
                                        <h2 class="mb-0">
                                            <button class="btn btn-link  btn-block text-left text-dark" type="button"
                                                    data-toggle="collapse" data-target="#slug-card">
                                                标签
                                                <span class="float-right"><i class="bi bi-chevron-down"></i></span>
                                            </button>
                                        </h2>
                                    </div>
                                    <div id="slug-card" class="collapse">
                                        <div class="card-body">
                                            <select class="product-tags" multiple="multiple" name="tag">
                                                #for(tag : tags)
                                                <option value="#(tag.title ??)" selected>#(tag.title ??)</option>
                                                #end
                                            </select>
                                            <p class="text-muted">多个标签请用 “回车键” 或英文逗号（,）隔开。</p>

                                            <div class="tags">
                                                #productTags(count = 20)
                                                #for(tag : tags)
                                                <a href="javascript:;" class="newTag">#(tag.title)</a>
                                                #end
                                                #end
                                            </div>

                                        </div>
                                    </div>
                                </div>

                                <!--分类-->
                                <div class="card">
                                    <div class="card-header" id="heading3">
                                        <h2 class="mb-0">
                                            <button class="btn btn-link btn-block text-left text-dark" type="button"
                                                    data-toggle="collapse" data-target="#category-card">
                                                分类
                                                <span class="float-right"><i class="bi bi-chevron-down"></i></span>
                                            </button>
                                        </h2>
                                    </div>
                                    <div id="category-card" class="collapse">
                                        <div class="card-body">
                                            <div class="form-group row">
                                                #for(category : categories)
                                                <div class="form-check">
                                                    <label>
                                                        #for(i = 0; i < category.layerNumber; i++)
                                                        &nbsp;&nbsp;&nbsp;&nbsp;
                                                        #end

                                                        #if(category.isCheck)
                                                        <input type="checkbox" name="category" value="#(category.id)"
                                                               checked/>
                                                        #else
                                                        <input type="checkbox" name="category" value="#(category.id)"/>
                                                        #end


                                                        #(category.title ??)
                                                    </label>
                                                </div>
                                                #end
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!--产品封面-->
                                <div class="card">
                                    <div class="card-header" id="heading5">
                                        <h2 class="mb-0">
                                            <button class="btn btn-link  btn-block text-left text-dark" type="button"
                                                    data-toggle="collapse" data-target="#image-card">
                                                产品封面
                                                <span class="float-right"><i class="bi bi-chevron-down"></i></span>
                                            </button>
                                        </h2>
                                    </div>
                                    <div id="image-card" class="collapse">
                                        <div class="card-body p-0">
                                            <img src="#(product.thumbnail ?? (CPATH + '/static/commons/img/nothumbnail.jpg'))"
                                                 style="width: 100%;max-height: 500px"
                                                 id="thumbnail">
                                            <input type="hidden" value="#(product.thumbnail ??)"
                                                   name="product.thumbnail"
                                                   id="productThumbnail">
                                        </div>
                                        <div class="card-footer">
                                            <button type="button" class="btn-image-browser btn btn-default btn-sm "
                                                    for-src="thumbnail"
                                                    for-input="productThumbnail">选择图片
                                            </button>
                                            <a href="javascript:;" style="padding-left: 15px"
                                               id="removeThumbnail">移除</a>
                                        </div>
                                    </div>
                                </div>

                                <!--选择视频-->
                                <div class="card">
                                    <div class="card-header" id="heading6">
                                        <h2 class="mb-0">
                                            <button class="btn btn-link  btn-block text-left text-dark" type="button"
                                                    data-toggle="collapse" data-target="#video-card">
                                                选择视频
                                                <span class="float-right"><i class="bi bi-chevron-down"></i></span>
                                            </button>
                                        </h2>
                                    </div>
                                    <div id="video-card" class="collapse">
                                        <div id="changeVideo">
                                            <div class="card-body p-0 video">
                                                <img src="#(CPATH)/static/commons/img/novideo.jpg"
                                                     style="width: 100%;max-height: 500px">
                                            </div>
                                        </div>
                                        <div class="card-footer">
                                            <button type="button" class=" btn btn-default btn-sm"
                                                    onclick="chooseVideo()">选择视频
                                            </button>
                                            <a href="javascript:;" style="padding-left: 15px" id="removeVideo">移除</a>
                                        </div>
                                    </div>
                                </div>

                                <!--产品缩略图-->
                                <div class="card">
                                    <div class="card-header" id="heading7">
                                        <h2 class="mb-0">
                                            <button class="btn btn-link  btn-block text-left text-dark" type="button"
                                                    data-toggle="collapse" data-target="#image-thumbnail-card">
                                                产品缩略图
                                                <span class="float-right"><i class="bi bi-chevron-down"></i></span>
                                            </button>
                                        </h2>
                                    </div>
                                    <div id="image-thumbnail-card" class="collapse">
                                        <div class="card-body p-0">
                                            <div class="d-flex thumbnail-list p-2">
                                                #for(image : images)
                                                <div class="product-thumbnail-item" draggable="true"
                                                     ondrop="drop(event,this)"
                                                     ondragover="allowDrop(event)" ondragstart="drag(event, this)">
                                                    <img src="#(image.src ??)">
                                                    <input type="hidden" name="imageSrcs" value="#(image.src ??)"/>
                                                    <input type="hidden" name="imageIds" value="#(image.id ?? '0' )"/>
                                                    <i class="fas fa-trash-alt image-reset"></i>
                                                </div>
                                                #end
                                                <div class="product-thumbnail">
                                                    <img src="#(CPATH)/static/commons/img/choose-image-btn.png"
                                                         class="chooseImage">
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>

                            </div>
                        </div>


                        <!--模板 tab -->
                        <div class="tab-pane fade" id="template-tab" role="tabpanel">
                            <div class="accordion">

                                <!--模板-->
                                <div class="card">
                                    <div class="card-header" id="heading4">
                                        <h2 class="mb-0">
                                            <button class="btn btn-link btn-block text-left text-dark" type="button"
                                                    data-toggle="collapse" data-target="#template-card">
                                                模板
                                                <span class="float-right"><i class="bi bi-chevron-down"></i></span>
                                            </button>
                                        </h2>
                                    </div>
                                    <div id="template-card" class="collapse">
                                        <div class="card-body">

                                            <div class="form-group row">

                                                <label class="col-sm-12">模板</label>

                                                <select class="form-control" name="product.style">
                                                    <option value="">默认（product.html）</option>
                                                    #for(style : styles)
                                                    <option value="#(style)" #selectedIf(product &&
                                                            product.style==style)>
                                                        product_#(style).html
                                                    </option>
                                                    #end
                                                </select>
                                            </div>

                                            <div class="form-group row">

                                                <label class="col-sm-12">模板展示标识</label>

                                                <input type="text" class="form-control" name="product.flag"
                                                       placeholder="展示标识" value="#(product.flag ??)" id="flag"/>

                                                #if(flags && flags.size() > 0)
                                                <p class="text-muted">当前模板支持的展示标识有：</p>
                                                <div class="tags">
                                                    #for(flag : flags ??)
                                                    <a href="javascript:;" class="tflag">#(flag)</a>
                                                    #end
                                                </div>
                                                #end

                                            </div>


                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>


                        <div class="tab-pane fade" id="extend-tab" role="tabpanel">
                            <div class="accordion">

                                <!--扩展-->
                                <div class="card">
                                    <div class="card-header">
                                        <h2 class="mb-0">
                                            <button class="btn btn-link btn-block text-left text-dark" type="button"
                                                    data-toggle="collapse" data-target="#fields-card">
                                                扩展
                                                <span class="float-right"><i class="bi bi-chevron-down"></i></span>
                                            </button>
                                        </h2>
                                    </div>
                                    <div id="fields-card" class="collapse">
                                        <div class="card-body">

                                            <div class="form-group row">
                                                <div class="col-sm-12">
                                                    #(fields.render())
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </form>
</section>
#end
